<template>
  <view class="relayTheMessage" :style="DynamicHeight">
    <!-- rightIcon="more-dot-fill"  @rightClick="rightClick" -->
    <up-navbar title="水印相机" :autoBack="false" placeholder @leftClick="leftClick"></up-navbar>

    <view :style="tabsDynamicHeight">
      <!-- #ifdef APP-PLUS -->
      <apPhome></apPhome>
      <!-- #endif -->
      <!-- #ifdef H5 -->
      <h5camera></h5camera>
      <!-- #endif -->
    </view>
  </view>
</template>

<script>
import h5camera from '../components/h5camera.vue'
import apPhome from '../components/home.nvue'
export default {
  name: 'watermark',
  components: {
    h5camera,
    apPhome
  },
  data () {
    return {
      height: 0,
      DynamicHeight: {},
      tabsDynamicHeight: {},
    }
  },
  created () {
    this.height = (uni.getSystemInfoSync().windowHeight || uni.getSystemInfoSync().screenHeight) || 0

    this.DynamicHeight = {
      height: `${this.height}px`,
      overflow: 'hidden'
    }
    // #ifdef APP-PLUS
    this.tabsDynamicHeight = {
      height: `${this.height - 75}px`,
      overflow: 'hidden',
    }
    // #endif

    // #ifdef H5
    this.tabsDynamicHeight = {
      height: `${this.height - 45}px`,
      overflow: 'hidden',
    }
    // #endif
  },
  methods: {
    leftClick () {
      uni.navigateBack()
    },

  }

}
</script>

<style lang="scss" scoped>
.relayTheMessage {
  width: 100%;
  // background-color: #ffffff;

  .info-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 26rpx;
    padding: 0 15rpx 5rpx;
    gap: 10rpx;
    color: #8a8b8c;
  }
}
</style>